<template>
	<el-card class="box-card" shadow="hover" @click="onclick">
		<div class="content">
			<div class="left">
				<div class="hespital-name">{{ hospitalInfo.hosname }}</div>
				<div class="tip">
					<div class="level">
						<svg
							t="1690849444115"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="2313"
							width="16"
							height="16">
							<path
								d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
								p-id="2314"></path>
						</svg>
						{{ hospitalInfo.param.hostypeString }}
					</div>
					<div class="time">
						<svg
							t="1690849501877"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="3507"
							width="16"
							height="16">
							<path
								d="M931.2 518.4c0-233.6-188.8-419.2-419.2-419.2-233.6 0-419.2 188.8-419.2 419.2 0 137.6 67.2 259.2 169.6 336l-57.6 51.2c-9.6 9.6-12.8 25.6-3.2 35.2 9.6 9.6 25.6 12.8 35.2 3.2l70.4-57.6c60.8 35.2 131.2 54.4 208 54.4 80 0 153.6-22.4 214.4-60.8 0 0 0 0 3.2 3.2l73.6 60.8c9.6 9.6 25.6 6.4 35.2-3.2 9.6-9.6 6.4-25.6-3.2-35.2l-64-54.4C867.2 774.4 931.2 652.8 931.2 518.4zM512 889.6c-204.8 0-371.2-166.4-371.2-371.2s166.4-371.2 371.2-371.2 371.2 166.4 371.2 371.2S716.8 889.6 512 889.6z"
								p-id="3508"></path>
							<path
								d="M208 96c-9.6-9.6-25.6-9.6-35.2 0l-118.4 118.4c-9.6 9.6-9.6 25.6 0 35.2 9.6 9.6 25.6 9.6 35.2 0l118.4-118.4C217.6 121.6 217.6 105.6 208 96z"
								p-id="3509"></path>
							<path
								d="M969.6 211.2l-118.4-115.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l118.4 115.2c9.6 9.6 25.6 9.6 35.2 0C979.2 236.8 979.2 220.8 969.6 211.2z"
								p-id="3510"></path>
							<path
								d="M707.2 300.8l-144 128c0 0 0 3.2-3.2 3.2-12.8-3.2-22.4-6.4-35.2-6.4-12.8 0-22.4 3.2-32 6.4 0-3.2-3.2-3.2-3.2-6.4l-92.8-83.2c-9.6-9.6-25.6-9.6-35.2 3.2-9.6 9.6-9.6 25.6 3.2 35.2l89.6 80c-16 19.2-28.8 41.6-28.8 70.4 0 54.4 44.8 102.4 102.4 102.4 54.4 0 102.4-44.8 102.4-102.4 0-25.6-9.6-48-25.6-67.2l140.8-124.8c9.6-9.6 9.6-25.6 3.2-35.2C732.8 294.4 716.8 294.4 707.2 300.8zM524.8 582.4c-28.8 0-51.2-22.4-51.2-51.2 0-28.8 22.4-51.2 51.2-51.2 28.8 0 51.2 22.4 51.2 51.2C576 556.8 553.6 582.4 524.8 582.4z"
								p-id="3511"></path>
						</svg>
						每天{{ hospitalInfo.bookingRule?.releaseTime }}放号
					</div>
				</div>
			</div>
			<div class="right">
				<img :src="'data:image/jpeg;base64,' + hospitalInfo.logoData" alt="医院logo" />
			</div>
		</div>
	</el-card>
</template>

<script setup lang="ts">
import { Hospital } from '@/api/home/type';
import { PropType } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

function onclick() {
	router.push({
		path: '/hospital',
		query: {
			hoscode: props.hospitalInfo.hoscode,
		},
	});
}

const props = defineProps({
	hospitalInfo: {
		required: true,
		type: Object as PropType<Hospital>,
	},
});
</script>

<style scoped lang="scss">
.box-card {
	width: calc(50% - 20px);
	margin-bottom: 20px;
	cursor: pointer;
	.content {
		display: flex;
		justify-content: space-between;
		.right {
			img {
				width: 50px;
				height: 50px;
			}
		}
		.left {
			flex: 1;
			.tip {
				display: flex;
				justify-content: space-between;
				margin-top: 20px;
				font-size: 14px;
				width: 60%;
				color: #7f7f7f;
				.level,
				.time {
					display: flex;
					align-items: center;
					svg {
						margin-right: 4px;
					}
				}
			}
		}
	}
}
</style>
